<template>
	<div>
		<div class="zs-card-sm zs-space-bottom zs-layout-flex-row">
			<el-select v-model="projectCode" class="zs-select-md zs-space-right-sm" placeholder="项目名称" filterable @change="changeProject()">
				<el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName" :value="item.projectCode" />
			</el-select>
			<span class="zs-layout-flex-row zs-layout-justify-end zs-layout-grow">
				<el-button class="zs-btn-md" :class="{ 'zs-btn-primary': isShowDashboard, 'zs-btn-info': !isShowDashboard }" @click="changeTab(true, false)">专项报表</el-button>
				<el-button class="zs-btn-md" :class="{ 'zs-btn-primary': isShowElectroMonitoring, 'zs-btn-info': !isShowElectroMonitoring }" @click="changeTab(false, true)" v-btnPermi="{ permi: 'p_btn_903_wuye_yongdianjiankong' }">用电监控</el-button>
			</span>
		</div>
    <el-scrollbar class="db-content-height" v-if="isShowDashboard">
		<div class="db-content-cards">
			<BaseInfo :projectCode="projectCode"></BaseInfo>
			<!-- 预算对标 -->
			<BudgetcAhievement :projectCode="projectCode" :menuKey="menuKey" :pageKey="pageKey" :permi="'p_btn_903_wuye_xiangqing_ysdb'" v-btnPermi="{ permi: 'p_btn_903_wuye_xiangqing_ysdb', noReport: true, isHiden: true }"> </BudgetcAhievement>
			<!-- 租赁分析-场地 -->
			<LeaseAnalysis :permi="'p_btn_903_wuye_changdichuzu'" leaseType="place" :biProjectCode="projectCode" :updateDate="updateDate" :biProjectName="biProjectName"></LeaseAnalysis>
			<!-- 租赁分析-广告 -->
			<LeaseAnalysis :permi="'p_btn_903_wuye_guanggaoweichuzu'" leaseType="ad" :biProjectCode="projectCode" :updateDate="updateDate" :biProjectName="biProjectName"></LeaseAnalysis>
			<!-- 租赁分析-库房 -->
			<LeaseAnalysis :permi="'p_btn_903_wuye_kufangchuzu'" leaseType="warehouse" :biProjectCode="projectCode" :updateDate="updateDate" :biProjectName="biProjectName"></LeaseAnalysis>
			<!-- 能耗分析 -->
			<EnergyCosts :permi="'p_btn_903_wuye_xiangqing_nhfx'" :projectCode="projectCode" :menuKey="menuKey" :pageKey="pageKey" />
			<!-- 设备维保 -->
			<EquipmentMaintenance :permi="'p_btn_903_wuye_shebeiweibao'" :projectCode="projectCode" :updateDate="updateDate" :menuKey="menuKey" :pageKey="pageKey" />
			<!--欠款分析-->
			<DebtAnalyse :permi="'p_btn_903_wuye_qiankuanfenxi'" :projectCode="projectCode" :updateDate="updateDate" :menuKey="menuKey" :pageKey="pageKey" />
		</div>
	</el-scrollbar>
	<ElectroMonitoringProperty v-if="isShowElectroMonitoring" :projectCode="projectCode" :updateDate="updateDate" :projectList="projectList" @changeProject="emitChangeProject"></ElectroMonitoringProperty>
	</div>
</template>
<script setup>
	import ElectroMonitoringProperty from '@/views/Energy/MonitorScreen/electroMonitoringProperty.vue';
	import EquipmentMaintenance from '@/views/Manage/Business/components/equipmentMaintenance';
	import EnergyCosts from '@/views/Property/component/energyCosts.vue';
	import BaseInfo from '@/views/Property/component/baseInfo';
	import BudgetcAhievement from '@/views/Property/component/budgetcAhievement';
	import DebtAnalyse from '@/views/Property/component/debtAnalyse';
	import LeaseAnalysis from '@/views/Manage/Business/components/leaseAnalysis';
	import projectListApi from '@/api/Property/projectList';

	import { ref } from 'vue';
	import { useRoute } from 'vue-router';
	const route = useRoute().query;
	const projectCode = ref(route.projectCode);
	const menuKey = route.menuKey;
	const pageKey = route.pageKey;

	let projectList = ref([]);
	const updateDate = route.updateDate;

	const biProjectName = ref('');
	const getList = () => {
		projectListApi.queryProjectListApi({ companyAreaManage: '整体', menuKey: menuKey, pageKey: pageKey }).then(res => {
			if (res.data.code == 200) {
				projectList.value = res.data.data;
				let target = projectList.value.find(item => {
					return item.projectCode == projectCode.value;
				});
				biProjectName.value = target ? target.projectName : '';
			}
		});
	};

	const changeProject = () => {
		const target = projectList.value.find(item => {
			return item.projectCode == projectCode.value;
		});
		console.log(target);
		biProjectName.value = target ? target.projectName : '';
	};

	const emitChangeProject = data => {
		projectCode.value = data.projectCode;
	};

	let isShowDashboard = ref(true);
	let isShowElectroMonitoring = ref(false);
	const changeTab = (dashboard, energyMonitor) => {
		isShowDashboard.value = dashboard;
		isShowElectroMonitoring.value = energyMonitor;
	};
	getList();
</script>

<style scoped lang="scss"></style>
